// 工作台
<template>
  <div class="homeApp">
    <div class="footer">
      <div class="footer-center">
        <div class="footer-left">
          <div class="footer-logo" @click="homeClick">
            <div v-show="!isbackgroundColor">
              <img :src="profileImg" alt="">
            </div>
            <div v-show="isbackgroundColor" :class="{profile:isbackgroundColor}">
              <div>{{userName | userNickFun}}</div>
            </div>
            <div>
              {{userName}}
            </div>
          </div>
          <div class="footer-list">
            <ul>
              <li :class="{navListLi:true,selectNav:isSelectNav == 9}" @click="navClick(9)">企业数据</li>
              <li :key="index" :class="{navListLi:true,selectNav:isSelectNav == index}" v-for="(item,index) in navLists" @click="navClick(index)">{{item.name}}</li>
            </ul>
          </div>
        </div>
        <div class="footer-back" @click="quitClick">
          退出
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main-content">
        <router-view keep-alive></router-view>
      </div>
    </div>
    <!-- 退出询问弹框 -->
    <v-infoDel :deleteBoxShow="deleteBoxShow" :delTostVal="delTostVal" @canfirm="butQuickClick" @cancel="cancleClick"></v-infoDel>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import infoDel from "./cModel/quick";
export default {
  components: {
    "v-infoDel": infoDel
  },
  data() {
    return {
      isbackgroundColor: false,
      userName: "XXX",
      deleteBoxShow: false,
      profileImg: "",
      delTostVal: "",
      isSelectNav: -1, //选中导航
      sourceVosLists: [],
      navLists: [
        // { name: "企业数据", path: "business" },
        // { name: "通讯录", path: "address" },
        // { name: "工作台", path: "work" },
        // { name: "设置", path: "install" }
      ] //导航列表
    };
  },
  filters: {
    userNickFun: function(val) {
      if (val) {
        if (val.length > 2) {
          return val.slice(val.length - 2, val.length);
        } else {
          return val;
        }
      } else {
        return "";
      }
    }
  },

  created: function() {
    // 权限管理
    var self = this;
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      this.orgHome();
    } else {
      // var warningStr = "没有登录不允许访问,点击确定跳转登录页面";
      // this.$alert(warningStr, "提示", {
      //   confirmButtonText: "确定",
      //   type: "info"
      // })
      //   .then(() => {
      this.$router.push({
        path: "/login"
      });
      // })
      // .catch(() => {
      //   this.$router.push({
      //     path: "/login"
      //   });
      // });
    }
  },
  watch: { $route: "fetchData" },
  methods: {
    // 监视路由
    fetchData(val) {
      var self = this;
      var pathStr = this.$route.path;
      var pathOne = pathStr.split("/")[2];

      if (pathOne == "business") {
        this.isSelectNav = 9;
      } else if (pathOne == "homePage") {
        this.isSelectNav = -1;
      } else {
        self.navLists.forEach(function(ele, ind) {
          if (
            pathOne.indexOf("work") > -1 ||
            pathOne.indexOf("loglist") > -1 ||
            pathOne.indexOf("notice") > -1 ||
            pathOne.indexOf("sign") > -1 ||
            pathOne.indexOf("examine") > -1 ||
            pathOne.indexOf("information") > -1 ||
            pathOne.indexOf("network") > -1 ||
            pathOne.indexOf("formDesign") > -1
          ) {
            if (ele.path.indexOf("work") > -1) {
              self.isSelectNav = ind;
            }
          } else if (pathOne.indexOf("install") > -1) {
            if (ele.path.indexOf("install") > -1) {
              self.isSelectNav = ind;
            }
          } else if (pathOne.indexOf("address") > -1) {
            if (ele.path.indexOf("address") > -1) {
              self.isSelectNav = ind;
            }
          }
        });
      }
    },
    // 导航跳转
    navClick(index) {
      this.isSelectNav = index;
      if (index == 9) {
        this.$router.push({
          path: "/home/business"
        });
      } else {
        this.$router.push({
          path: "/home/" + this.navLists[index].path
        });
        sessionStorage.setItem("getAppid", this.navLists[index].sourceId);
      }
    },
    // 退出
    quitClick() {
      var self = this;
      self.deleteBoxShow = true;
      self.delTostVal = "您确认要退出该系统吗？";
    },
    // 确认退出
    butQuickClick() {
      var self = this;
      self
        .getOauthRemoveToken({
          passportId: sessionStorage.getItem("passportPwdId")
        })
        .then(data => {
          if (data.statusCode == 200) {
            this.$router.push({
              path: "/login"
            });
            sessionStorage.removeItem("ORGID");
            sessionStorage.removeItem("accessToken");
            sessionStorage.removeItem("memberId");
            sessionStorage.removeItem("mobile");
            sessionStorage.removeItem("passportPwdId");
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 取消退出
    cancleClick() {
      var self = this;
      self.deleteBoxShow = false;
    },
    // 主页跳转
    homeClick() {
      this.isSelectNav = -1;
      this.$router.push({
        path: "/home/homePage"
      });
    },
    // 应用列表
    listFun() {
      var self = this;
      self
        .getRpcOrgAppWorkIndex({
          orgId: sessionStorage.getItem("ORGID")
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              if (data.data.indexVos) {
                var arrs = sessionStorage.getItem("sourceIdsappids");
                var arr = JSON.parse(arrs);
                self.navLists = [];
                self.sourceVosLists = data.data.sourceVos;
                self.sourceVosLists.forEach(function(elel, indl) {
                  arr.forEach(function(eler, indr) {
                    // sourceId
                    if (elel.sourceId == eler) {
                      if (elel.name == "通讯录") {
                        self.navLists.push({
                          name: "通讯录",
                          path: "address",
                          sourceId: elel.sourceId,
                          id: elel.id,
                          sourceRoleId: elel.sourceRoleId
                        });
                      } else if (elel.name == "工作台") {
                        self.navLists.push({
                          name: "工作台",
                          path: "work",
                          sourceId: elel.sourceId,
                          id: elel.id,
                          sourceRoleId: elel.sourceRoleId
                        });
                      } else if (elel.name == "设置") {
                        self.navLists.push({
                          name: "设置",
                          path: "install",
                          sourceId: elel.sourceId,
                          id: elel.id,
                          sourceRoleId: elel.sourceRoleId
                        });
                      }
                    }
                  });
                });
                self.fetchData();
              }
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 获取用户头像
    orgHome() {
      var self = this;
      if (sessionStorage.getItem("ORGID")) {
        self
          .getapiorghome({
            companyId: sessionStorage.getItem("ORGID"),
            passportId: sessionStorage.getItem("passportPwdId")
          })
          .then(data => {
            if (data.statusCode == 200) {
              if (data.data) {
                if (data.data.member) {
                  self.userName = data.data.member.memberName;
                }
                if (data.data.profile) {
                  if (data.data.profile.indexOf("#", 0) != -1) {
                    self.isbackgroundColor = true;
                  } else {
                    self.profileImg = data.data.profile;
                    self.isbackgroundColor = false;
                  }
                }

                if (data.data.subData) {
                  if (data.data.subData.appIds) {
                    sessionStorage.setItem(
                      "appids",
                      JSON.stringify(data.data.subData.appIds)
                    );
                  }
                  if (data.data.subData.sourceIds) {
                    self.listFun();
                    sessionStorage.setItem(
                      "sourceIdsappids",
                      JSON.stringify(data.data.subData.sourceIds)
                    );
                  }
                }
              }
            } else if (data.statusCode == "200003") {
              this.$router.push({
                path: "/login"
              });
            } else {
              this.$router.push({
                path: "/login"
              });
            }
          })
          .catch(msg => {
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    ...mapActions([
      "getOauthRemoveToken",
      "getapiorghome",
      "getRpcOrgAppWorkIndex"
    ])
  }
};
</script>
<style scoped>
.footer-left {
  display: flex;
  align-items: center;
}

.footer-logo {
  width: 260px;
  height: 65px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  cursor: pointer;
}

.footer-logo > div:nth-child(1) {
  width: 35px;
  height: 35px;
  overflow: hidden;
}

.footer-logo > div:nth-child(1) img {
  width: 100%;
  height: 100%;
}

.footer-logo > div:nth-child(2) {
  font-size: 14px;
  margin-left: 15px;
  color: #333;
}

.footer-logo > div:nth-child(3) {
  font-size: 14px;
  margin-left: 15px;
  color: #333;
  overflow: hidden;
}
.footer-list {
  height: 65px;
}

.footer-list ul {
  height: 65px;
  display: flex;
  align-items: center;
}

.selectNav::after {
  position: absolute;
  bottom: 0px;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #38adff;
  content: "";
}

.navListLi {
  position: relative;
  width: 135px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  color: #333;
}

.footer-back {
  width: 34px;
  cursor: pointer;
  font-size: 12px;
  color: #333;
}

.footer-center {
  width: 1200px;
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-content {
  width: 1200px;
  min-height: 497px;
  /* overflow: hidden; */
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  margin-top: 30px;
  margin-bottom: 30px;
}

.main {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 65px);
  overflow: hidden;
}

.footer {
  width: 100%;
  height: 65px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homeApp {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.profile {
  background: #38adff !important;
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
}

.profile > div {
  color: #fff;
}
</style>